<!--
 * @Description  : 
 * @Autor        : guoxi
 * @Date         : 2022-07-21 14:35:42
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-24 18:38:48
 * @FilePath     : \rpms\src\views\project\create\components\plan.vue
-->
<template>
  <el-button
    v-if="!isApproval && !model.dis"
    @click="handleAdd"
    class="btnClass"
    type="primary"
    icon="el-icon-plus"
  />
  <el-table
    :data="model.tableData"
    border
    style="width: 100%"
    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
  >
    <template #empty>
      <el-empty :image-size="50" description="暂无数据"></el-empty>
    </template>
    <el-table-column type="index" label="序号"> </el-table-column>
    <el-table-column prop="time" label="起止时间"></el-table-column>
    <el-table-column prop="content" label="研究内容"></el-table-column>
    <el-table-column prop="goal" label="预期目标"></el-table-column>
    <el-table-column label="变更状态" v-if="model.dis">
      <template #default="{ row }">
        {{
          row.alterationType === "add"
            ? "新增"
            : row.alterationType === "delete"
            ? "删除"
            : row.alterationType === "update"
            ? "编辑"
            : ""
        }}
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="!isApproval && !model.dis">
      <template #default="{ row, $index }">
        <el-button type="text" @click="handleEdit(row, $index)">编辑</el-button>
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除该条记录吗？"
          @confirm="handleDelete(row, $index)"
        >
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    :title="model.isEdit ? '修改项目实施计划' : '添加项目实施计划'"
    v-model="model.dialogFormVisible"
    destroy-on-close
    width="45vw"
  >
    <el-form
      :model="model.formData"
      ref="formRef"
      @submit.prevent
      :rules="model.formRules"
      label-width="100px"
    >
      <el-row>
        <el-col>
          <el-form-item label="起止时间" prop="timeObj">
            <el-date-picker
              v-model="model.formData.timeObj"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="研究内容" prop="content">
            <el-input
              type="textarea"
              v-model="model.formData.content"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="预期目标" prop="goal">
            <el-input type="textarea" v-model="model.formData.goal"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row justify="end">
      <el-button @click="model.dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-row>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import NotifMessage from "/@/utils/message/notification";
import { cloneDeep } from "lodash-es";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "Plan",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    startTime: {
      type: String,
      default: ""
    },
    endTime: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  //   emits: ["change", "load"],
  setup(props, ctx) {
    console.log(props, ctx);
    const route = useRoute();
    const isApproval = route.query.mode === "approval" ? true : false;
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const model = reactive({
      dis: props.disabled,
      deleteList: [],
      isEdit: false,
      dialogFormVisible: false,
      index: 0,
      tableData: [],
      formData: {
        goal: "",
        timeObj: null,
        time: "",
        content: "",
        alterationType: null
      },
      formRules: {
        timeObj: [
          { required: true, message: "请选择起止时间", trigger: "change" }
        ],
        content: [
          { required: true, message: "请输入研究内容", trigger: "change" }
        ],
        goal: [{ required: true, message: "请输入预期目标", trigger: "change" }]
      }
    });
    const handleSubmit = async () => {
      const isValid = await new Promise(resolve =>
        formRef.value.validate(resolve)
      );
      if (!isValid) return;
      const startTime = props.startTime.replace(" 12:00:00", "");
      const endTime = props.endTime.replace(" 12:00:00", "");
      const startTimeLong = new Date(startTime).getTime();
      const endTimeLong = new Date(endTime).getTime();
      const startTimeLong2 = new Date(model.formData.timeObj[0]).getTime();
      const endTimeLong2 = new Date(model.formData.timeObj[1]).getTime();
      if (startTimeLong2 < startTimeLong) {
        NotifMessage.warning(
          `起始时间不能早于项目开始时间${startTime},请重新选择`
        );
        return;
      }
      if (endTimeLong2 > endTimeLong) {
        NotifMessage.warning(
          `结束时间不能晚于项目预计结束时间${endTime},请重新选择`
        );
        return;
      }

      model.formData.time =
        model.formData.timeObj[0] + "至" + model.formData.timeObj[1];
      if (model.isEdit) {
        model.tableData[model.index] = cloneDeep(model.formData);
      } else {
        model.tableData.push(model.formData);
      }

      model.dialogFormVisible = false;
    };
    const handleAdd = () => {
      if (!props.startTime || !props.endTime) {
        NotifMessage.warning("请先选择项目开始时间和项目预计验收时间");
        return;
      }
      model.formData = {
        goal: "",
        timeObj: null,
        time: "",
        content: "",
        alterationType: null
      };
      if (route.query.mode === "change") {
        model.formData.alterationType = "add";
      }
      model.isEdit = false;
      model.dialogFormVisible = true;
    };
    const handleEdit = (row, index) => {
      model.index = index;
      if (route.query.mode === "change") {
        row["alterationType"] = "update";
      }
      model.dialogFormVisible = true;
      model.isEdit = true;
      model.formData = cloneDeep(row);
    };
    const handleDelete = (row, index) => {
      if (route.query.mode === "change" && row.alterationType == null) {
        row["alterationType"] = "delete";
        model.deleteList.push(row);
      }
      model.tableData.splice(index, 1);
    };
    onMounted(() => {
      model.tableData = props.data || [];
    });

    watch(
      () => props.data,
      newvalue => {
        model.tableData = newvalue || [];
      },

      { immediate: false }
    );
    return {
      isApproval,
      model,
      formRef,
      handleSubmit,
      handleAdd,
      handleEdit,
      handleDelete
    };
  }
});
</script>
<style lang="scss" scoped>
.btnClass {
  margin-bottom: 10px;
}
</style>
